<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <meta name="author" content="">
    <title>搜索</title>
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/global.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/pace-theme-flash.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/d-audio.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/myPagination.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/index.css">
    <link rel="shortcut icon" href="http://img.wzfdepress.com/avatar.jpg">
    <style rel="stylesheet">
        .lazy-image {
            background: url('http://wzfdepress.com/static/img/loading.gif') no-repeat center;
            background-size: 26% 35%;
            height: 100%;
            width: 100%;
        }
    </style>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!--PC导航栏-->
    <nav class="nav-bar-holder">
        <div class="nav-bar" id="nav-bar">
            <div class="logo-box">
                <a href="index.html" class="blog-title ta-c"><img style="vertical-align: top;" alt="logo"
                        src="http://img.wzfdepress.com/avatar.jpg" /></a>
            </div>
            <div class="nb-a-holder" id="home"><a class="nb-a ta-c" href="index.html">首页</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="category.html">分类</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="tag.html">标签墙</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="archive.html">归档</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="link.html">友情链接</a></div>
            <!--搜索框-->
            <div id="search-nb">
                <span class="search-s fl">
                    <label for="search-input"></label><input class="fl" type="text" id="search-input"
                        placeholder="请输入关键字">
                    <a class="search-icon fl" onclick="search_by_key()" href="javascript:void(0);"></a>
                </span>
            </div>
<!--            <div class="nb-a-holder-last">-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="login.html">登录</a>-->
<!--                </div>-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="register.html">注册</a>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </nav>
    <!--mobile导航栏-->
    <nav class="mobile-nav">
        <div class="logo-box">
            <a href="index.html" class="blog-title ta-c">
                <img style="vertical-align: top;" alt="logo" src="http://img.wzfdepress.com/avatar.jpg" /></a>
        </div>
        <a id="mobile_cate" style="background-image: url('http://wzfdepress.com/static/img/cate.svg')" href="javascript:void(0);"></a>
    </nav>
    <ul id="nav-m-list">
        <li id="cancel-li"><a class="fr" id="cancel" href="javascript:void(0);"></a></li>
        <li id="m-img-li">
            <img id="m-img" alt="苍茫误此生" src="http://img.wzfdepress.com/avatar.jpg">
        </li>
        <li>
            <span class="search-s fl">
                <label for="search-input-m"></label><input class="fl" type="text" id="search-input-m" placeholder="关键词">
                <a class="search-icon fl" onclick="m_search()" href="javascript:void(0);"></a>
            </span>
        </li>
        <li><a class="w-h-100 fl" href="index.html">首页</a></li>
<!--        <li><a class="w-h-100 fl" href="login.html">登录</a></li>-->
<!--        <li><a class="w-h-100" href="register.html">注册</a></li>-->
        <li><a class="w-h-100 fl" href="category.html">分类</a></li>
        
        <li><a class="w-h-100 fl" href="archive.html">归档</a></li>
        <li><a class="w-h-100 fl" href="link.html">友情链接</a></li>
    </ul>
    <div id="d-audio" class="d-audio" style="width: 150px; z-index: 99; position: fixed; bottom: 5px; left: 5px;"></div>
    <!--主体-->
    <div class="big-container">
        <article class="article">
            <!--左容器-->
            <div class="result-box">
                <!--文章内容-->
                <div id="article-holder" style="width: 100%; float: left" th:each="article:${articles}">
                    <div class="article-box">
                        <div class="ab-content">
                            <a th:href="@{'/article/'+${article.id}+'.html'}" class="article-img-box">
                                <img class="lazy-image article-img" th:src="@{${article.coverId}}">
                            </a>
                            <div class="article-title">
                                <a th:href="@{'/article/'+${article.id}+'.html'}" th:text="${article.title}"></a>
                            </div>
                            <div class="article-detail-box c-666" th:text="${article.blogDesc}">

                            </div>
                            <span class="article-tail-box">
                                <i class="fl"
                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/read-index.svg')"></i>
                                <span class="read-number c-999 fl" th:text="${article.viewNum}"></span>
                                <i class="fl"
                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/comment-index.svg')"></i>
                                <span class="article-date c-999" th:text="${#dates.format(article.gmtCreate,'yyyy-MM-dd')}"></span>
                                <span class="article-author one-line-overflow c-999" th:text="${article.authorName}"></span>
                            </span>
                        </div>
                    </div>

                </div>
<!--                &lt;!&ndash;分页指示器&ndash;&gt;-->
<!--                <div id="pagination" class="pagination fl"></div>-->
            </div>

        </article>
    </div>
    <!--尾部-->
    <footer class="footer">
        <div class="footer-line">
            <div class="icon-center">
                <span class="icon-box"><a id="github-icon" target="_blank" href="https://gitee.com/cheerfulwzf"
                                          class="foot-icon"></a>
                </span>
                <span class="icon-box"><a id="qq-icon" target="_blank"
                                          href="tencent://Message/?Uin=2434780193&amp;websiteName=q-zone.qq.com&amp;Menu=yes"
                                          class="foot-icon"></a>
                </span>
            </div>
        </div>
        <div class="footer-line">Powered By <a href="mailto:cheerful0120@qq.com"
                                               target="_blank">Cheerful</a> • © 2021-10</div>
        <div class="footer-line"><a href="http://beian.miit.gov.cn/" target="_blank"> 蜀ICP备2021024763号</a>
    </footer>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/sweetalert.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/pace.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/base.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/d-audio.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/myPagination.js"></script>
    <script type="text/javascript">
        const pagination = new myPagination({
            id: 'pagination',
            curPage: 1, //初始页码
            pageTotal: 1, //总页数
            pageAmount: 10, //每页多少条
            dataTotal: 3, //总共多少条数据
            pageSize: 3, //可选,分页个数
            //showPageTotalFlag: true, //是否显示数据统计
            getPage: function (page) {
                console.log("current page: ", page);
            }
        });
    </script>
    <script type="text/javascript" defer>
        //音乐插件
        const myAudio = new Daudio({
            ele: '#d-audio',
            src: 'https://zhaoyangkun.gitee.io/blog-static/music/迷人的危险.mp3',
            imageurl: 'https://zhaoyangkun.gitee.io/blog-static/img/dance_flow.jpg',
            name: '迷人的危险',
            singer: 'dance flow',
            // 是否显示进度信息
            showprogress: true,
            // 是否循环
            loop: true,
            // '' 就是默认状态， cricle则是初始化就是圆形且可以旋转
            initstate: 'cricle',
            next: function () {},
            ended: function () {}
        });
        //myAudio.play();
    </script>
</body>

</html>